<template>
  <div class="administrator">
    <!--    管理员查询表单-->
    <div class="search">
      <div class="title">管理员列表</div>
      <el-form :inline="true" :model="searchForm" label-width="120px" class="demo-form-inline" size="mini"
               ref="search">
        <el-form-item label='管理员id' prop="ad_id">
          <el-input v-model="searchForm.ad_id" placeholder="请填入数字"
                    oninput="if(isNaN(value)){value=value.replace(/[^0-9]/g,'')}"></el-input>
        </el-form-item>
        <el-form-item label='登录名' prop="ad_uname">
          <el-input v-model="searchForm.ad_uname"></el-input>
        </el-form-item>
        <el-form-item label='姓名' prop="ad_name">
          <el-input v-model="searchForm.ad_name"></el-input>
        </el-form-item>
        <el-form-item label='手机号码' prop="ad_phone">
          <el-input v-model="searchForm.ad_phone"></el-input>
        </el-form-item>
        <el-form-item label="账号状态" prop="ad_status">
          <el-select v-model="searchForm.ad_status" >
            <el-option label="全部" value=""></el-option>
            <el-option label="正常" :value="1"></el-option>
            <el-option label="冻结" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="resetForm('search')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--   新增管理员按钮-->
    <el-row>
       <el-col>
        <el-button type="primary" @click="showAddDialog" size="mini" :disabled="admin.ad_rank==0">新增</el-button>
      </el-col>
    </el-row>

    <!--   管理员列表-->
    <el-table
      :data="showTableData"
      stripe
      style="width: 100%"
      size="mini">
      <el-table-column
        type="index"
        label="#"
        width="50">
      </el-table-column>
      <el-table-column
        prop="ad_id"
        label="管理员id">
      </el-table-column>
      <el-table-column
        prop="ad_uname"
        label="登录名">
      </el-table-column>
      <el-table-column
        prop="ad_name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="ad_sex"
        label="性别">
        <template slot-scope="scope">
          <span v-if="scope.row.ad_sex == 0">保密</span>
          <span v-if="scope.row.ad_sex == 1">男</span>
          <span v-if="scope.row.ad_sex == 2">女</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="ad_phone"
        label="手机号码">
      </el-table-column>
      <el-table-column
        prop="ad_email"
        label="邮箱">
      </el-table-column>
      <el-table-column
        prop="ad_status"
        label="账号状态">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.ad_status==1">正常</el-tag>
          <el-tag type="info" v-else>冻结</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="ad_rank"
        label="权限等级">
        <template slot-scope="scope">
          <span v-if="scope.row.ad_rank == 0">普通管理员</span>
          <span v-if="scope.row.ad_rank == 1">超级管理员</span>
        </template>
      </el-table-column>
<!--      <el-table-column-->
<!--        prop="createTime"-->
<!--        label="注册时间">-->
<!--      </el-table-column>-->
      <el-table-column label="操作" width="300px">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="updateAdminClick(scope.row)" :disabled="admin.ad_rank==0">编辑</el-button>
          <el-button type="primary" size="mini" @click="deleteAdmin(scope.row)" :disabled="admin.ad_rank==0">删除</el-button>
          <el-button type="primary" size="mini" @click="toggleState(scope.row)" :disabled="admin.ad_rank==0">{{scope.row.ad_status==1 ? "冻结" : "解冻"}}</el-button>
          <el-button type="primary" size="mini" @click="resetPassword(scope.row)" :disabled="admin.ad_rank==0">重置密码</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--      分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <!--    增加管理员对话框-->
    <add-admin :addDialogVisible="addDialogVisible" @afterAddingAdmin="afterAddingAdmin"
               @addDialogClosed="addDialogClosed"></add-admin>

    <!-- 编辑管理员信息-->
    <update-admin :updateDialogVisible="updateDialogVisible" :updateAdminData="updateAdminForm"
                  @closeUpdateDialog="closeUpdateDialog"
                  @afterUpdatingAdmin="afterUpdatingAdmin"></update-admin>

  </div>
</template>

<script>
import {toggleAdStatus,deleteAdmin,resetAdPassword,getAdminByKey} from '@/network/system/administrator'
import AddAdmin from "@/views/system/administrator/AddAdmin";
import UpdateAdmin from "@/views/system/administrator/UpdateAdmin";
export default {
  name: "Administrator",
  components: {UpdateAdmin, AddAdmin},
  created(){
    this.admin = JSON.parse(window.localStorage.getItem("admin"));
    this.getAdminListFromServe();
  },
  computed:{
    total(){ //总条数
      return this.tableData.length;
    }
  },
  data(){
    return{
      admin: null,  //当前登录的账号信息
      currentPage: 1,  //当前页面
      pageSize:5,  //页面条数，默认为10条
      updateDialogVisible: false,  //编辑管理员对话框
      addDialogVisible: false,  //增加管理对话框
      updateAdminForm:{}, //编辑管理员的传参
      searchForm:{   //查询“管理员”表单
        ad_id:'', //管理员id
        ad_uname:'',  //登录名
        ad_name: '', //姓名
        ad_phone: '', //手机号
        ad_status: ''  //账号状态  0冻结  1正常 -1全部
      },
      showTableData:[],  //真正展示的列表
      tableData:[],  //获取的id号
    }
  },
  methods:{
    getAdminListFromServe(){  //从后台中获取管理员表单
      this.currentPage = 1; //每次请求时都设置为第一页
      getAdminByKey(this.searchForm).then(res=>{
        this.tableData = res.data;
        this.tableData = this.tableData.filter(item=>item.ad_id!=this.admin.ad_id);  //不显示当前的管理员信息
        this.getTableData();  //提取相应的数据显示在表格中
      })
    },
    showAddDialog() { //点击添加按钮
      this.addDialogVisible = true;
    },
    addDialogClosed(){  //关闭“添加管理员”对话框
      this.addDialogVisible =false;
    },
    afterAddingAdmin(){   //成功添加管理员后
      this.addDialogVisible = false;
      this.getAdminListFromServe();
    },

    closeUpdateDialog(){ //关闭 ‘编辑管理员’ 对话框
      this.updateDialogVisible= false;
    },
    afterUpdatingAdmin(){  //成功 编辑管理员 后
      this.updateDialogVisible = false;
      this.getAdminListFromServe();
    },
    updateAdminClick(admin){  //点击 编辑 按钮
      this.updateAdminForm = admin; //传参
      this.updateDialogVisible = true;
    },
    resetPassword(admin){  //重置密码
      this.$confirm(`确认重置${admin.ad_name}管理员的密码吗？`,'提示',{
        confirmButtonText:'确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        resetAdPassword(admin.ad_id).then(res=>{
          if(res.data.status==200){
            return this.$message.success(`${admin.ad_name}管理员的密码重置成功！`);
          }
          else{
            return this.$message.error(`${admin.ad_name}管理员的密码重置失败！`);
          }
        })
      }).catch(()=>{
        return this.$message('已取消重置密码！');
      })
    },
    deleteAdmin(admin){  //删除管理员
      this.$confirm(`${admin.ad_name}管理员会被永久删除,是否继续?`,'提示',{
        confirmButtonText:'确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        deleteAdmin(admin.ad_id).then(res=>{
          if(res.data.status==200){
            this.$message.success(`${admin.ad_name}管理员删除成功！`);
            this.getAdminListFromServe();
          }
          if(res.data.status==500){
            this.$message.error(`${admin.ad_name}管理员删除失败！`)
          }
        })
      }).catch(()=>{
        return this.$message('已取消删除！');
      })

    },
    toggleState(administrator){  //解冻、冻结账号
      toggleAdStatus(administrator.ad_id).then(res=>{
        if(res.data.status==200){
          administrator.ad_status = administrator.ad_status==1 ? 0 : 1;
          if(administrator.ad_status==1){
            this.$message.success(administrator.ad_name+"管理员解冻成功！");
          }
          else{
            this.$message.success(administrator.ad_name+"管理员冻结成功！");
          }
        }else{
          this.$message.error(`${administrator.ad_name}管理员账号状态修改失败！`);
        }
      })
    },
    resetForm(formName){    //重置查询表单
      this.$refs[formName].resetFields();
      this.getAdminListFromServe();
    },
    onSubmit(){  //查询
      this.getAdminListFromServe();
    },

    handleSizeChange(val){  //每页条数变化
      this.pageSize =val;
      this.getTableData();
    },
    handleCurrentChange(val){  //当前页发生改变
      this.currentPage = val;
      this.getTableData();
    },
    getTableData(){  //对数据进行分类
      let startIndex = (this.currentPage-1)*this.pageSize;
      let endIndex = startIndex+this.pageSize > this.tableData.length ? this.tableData.length : startIndex+this.pageSize;
      this.showTableData = this.tableData.slice(startIndex,endIndex);
    }
  }
}
</script>

<style scoped>
.search{
  border: 1px solid #999999;
  border-radius: 3px;
  margin-bottom: 10px;
}
.title{
  color: white;
  background-color: rgb(55,75,118);
  font-size: 12px;
  height: 25px;
  line-height: 25px;
  padding-left:8px;
  margin-bottom: 10px;
}
</style>
